<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--head部分-->
<head th:include="layout :: htmlhead" th:with="title='订单管理系统'">
<!--    <meta  charset="utf-8" name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">-->
</head>
<body style="width: 100%;height:auto;background: url('/images/ge.jpeg') no-repeat;background-size: 100%;">
    <div class="layui-container" style="height: 100%" >

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 6%">
            <legend style="margin-left: 40%"><span style="font-weight: bold;font-size:22px;">订单管理系统</span></legend>
        </fieldset>

        <div class="layui-row">
            <div class="layui-col-xs6" style="width: 100%;">
                <div class="grid-demo" id="login" style="display: block;float: right; width:100%;">
                    <header>
                        <h1 style="color:#FFFFFF">欢迎登录</h1>
                    </header>
                    <form id="useLogin" class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input id="username" name="username" lay-verify="required" autocomplete="off" class="layui-input" type="text"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密&nbsp;&nbsp;码</label>
                            <div class="layui-input-inline">
                                <input id="password" name="password" lay-verify="required" autocomplete="off" class="layui-input" type="password"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline" style="width: 100%">
                                <label class="layui-form-label">验证码</label>
                                <div id="newCruess" class="layui-input-inline" style="width: 80%;" >
                                    <input id="code" name="code" style="width: 28%;float: left"  lay-verify="required" autocomplete="off" class="layui-input" type="text"/>
                                    <div class="layui-input-inline" style="width: 35%;padding-left: 5px;">
                                        <canvas id="canvas" width="120" height="38"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                                <input type="checkbox" name="rememberMe" lay-skin="primary" style="color: red" title="记住我">
                                <button id="loginBtn" class="layui-btn layui-btn-primary" lay-submit="" lay-filter="login">登录</button>
                                <button class="layui-btn" type="reset"  onclick="goto_register();return false;">去注册</button>
                        </div>
                    </form>
                </div>
                <div class="grid-demo" id="register" style="display: none;float: right;width: 100%">
                    <header>
                        <h1 style="color:#FFFFFF">欢迎注册</h1>
                    </header>
                    <form id="registerFrom" class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input id="regUsername" name="regUsername" placeholder="请输入用户名" lay-verify="required" autocomplete="off" class="layui-input" type="text"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密&nbsp;&nbsp;码</label>
                            <div class="layui-input-inline">
                                <input id="regPassword" name="regPassword" lay-verify="required"  placeholder="请输入密码" autocomplete="off" class="layui-input" type="password"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">确认密码</label>
                            <div class="layui-input-inline">
                                <input id="regPasswords" name="regPasswords" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" type="password"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机号</label>
                            <div class="layui-input-inline">
                                <input id="telphone" name="telphone" lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input" type="tel"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <input id="email" name="email" lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input" type="email"/>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" onclick="register();return false;">
                                    <i class="layui-icon"></i> 注册
                                </button>
                                <button class="layui-btn layui-btn-primary" onclick="goto_login();return false;">
                                    <i class="layui-icon"></i> 返回登录
                                </button>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
        </div>
    </div>

<script type="text/javascript" src="/js/login.js"></script>
<script type="text/javascript" src="/js/validate.js"></script>
<style>
    .layui-form-checkbox[lay-skin=primary] span{
        color: white;
    }
    @media screen and (min-width: 480px) {
        body {
            background-color: lightblue;
        }
        .layui-container{
            overflow:auto;
        }
        .layui-col-xs6{
            width: 100%;
        }
    }
</style>

</body>
</html>